<template>
  <div id="sidebarView">
    <div class="dnd-app">
      <div class="dnd-wrap" ref="dndW">
        <div class="dnd-item">
          <TestComVue @comMousedown="startDrag"></TestComVue>
        </div>
        <!-- <div class="dnd-item">
          <TestCom3Vue @comMousedown="startDrag"></TestCom3Vue>
        </div>
        <div class="dnd-item">
          <TestCom4Vue @comMousedown="startDrag"></TestCom4Vue>
        </div> -->
        <div class="dnd-item">
          <TestCom5Vue @comMousedown="startDrag"></TestCom5Vue>
        </div>
        <div class="dnd-item">
          <RectComVue @comMousedown="startDrag"></RectComVue>
        </div>
        <div class="dnd-item size-40">
          <TestCom6Vue @comMousedown="startDrag"></TestCom6Vue>
        </div>
        <div class="dnd-item size-40">
          <TestCom7Vue @comMousedown="startDrag"></TestCom7Vue>
        </div>
        <div class="dnd-item size-30">
          <TestCom2Vue @comMousedown="startDrag"></TestCom2Vue>
        </div>
      </div>
    </div>
    <hr />
    <!-- <div class="title"></div> -->
    <div class="dnd-wrap">
      <div class="dnd-item size-15">
        <AdapterComVue @comMousedown="startDrag"></AdapterComVue>
      </div>
    </div>
    <hr />
  </div>
</template>
<script>
import { Dnd } from "@antv/x6-plugin-dnd";
import { creatRegister } from "../../utils/creatRegister";
import TestComVue from "@/sideBarComList/TestCom";
import TestCom2Vue from "@/sideBarComList/TestCom2";
import TestCom3Vue from "@/sideBarComList/TestCom3";
import TestCom4Vue from "@/sideBarComList/TestCom4";
import TestCom5Vue from "@/sideBarComList/TestCom5";
import TestCom6Vue from "@/sideBarComList/TestCom6";
import TestCom7Vue from "@/sideBarComList/TestCom7";
import RectComVue from "@/sideBarComList/RectCom";
import AdapterComVue from "@/sideBarComList/otherCom/AdapterCom";
export default {
  name: "SideBar",
  data() {
    return {
      dnd: null,
      shapeList: [
        {
          shape: "TestCom",
          component: this.getComponent("TestCom"),
        },
        {
          shape: "TestCom2",
          component: this.getComponent("TestCom2"),
        },
        {
          shape: "TestCom3",
          component: this.getComponent("TestCom3"),
        },
        {
          shape: "TestCom4",
          component: this.getComponent("TestCom4"),
        },
        {
          shape: "TestCom5",
          component: this.getComponent("TestCom5"),
        },
        {
          shape: "TestCom6",
          component: this.getComponent("TestCom6"),
        },
        {
          shape: "TestCom7",
          component: this.getComponent("TestCom7"),
        },
        {
          shape: "RectCom",
          component: this.getComponent("RectCom"),
        },
        {
          shape: "AdapterCom",
          component: AdapterComVue,
        },
      ],
    };
  },
  props: ["graph"],
  components: {
    TestComVue,
    TestCom2Vue,
    TestCom3Vue,
    TestCom4Vue,
    TestCom5Vue,
    TestCom6Vue,
    TestCom7Vue,
    RectComVue,
    AdapterComVue, // 连接器
  },
  mounted() {
    // 热更新问题，检测不到关联，不影响生产使用
    this.initDnd();
    // 初始化register
    this.shapeList.forEach((item) => {
      creatRegister(item.shape, item.component);
    });
  },
  methods: {
    initDnd() {
      this.dnd = new Dnd({
        target: this.graph,
        scaled: false,
        animation: true,
        // 处理节点 id 不一致
        getDragNode: (node) => node.clone({ keepId: true }),
        getDropNode: (node) => {
          node.setData({
            isDropEnd: true,
          }); // 标记为拖拽后，也就是画布上的节点
          return node.clone({ keepId: true });
        },
      });
    },
    getComponent(shape) {
      return () => import(`@/sideBarComList/${shape}.vue`);
    },
    startDrag({ e, nodeData }) {
      let { width, height } = e.target.parentNode.getBoundingClientRect();
      const node = this.graph.createNode({
        width: width,
        height: height,
        shape: nodeData.shape,
        data: nodeData,
      });
      this.dnd.start(node, e);
    },
  },
};
</script>
<style lang="less" scoped>
/* 滚动条 */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  /**/
}
*::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
*::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #656565;
}
*::-webkit-scrollbar-corner {
  background: #79c7ff;
}
#sidebarView {
  padding: 10px 0;
  width: 200px;
  height: 100%;
  background-color: #f1f3f4;
  overflow: auto;
  // padding: 5px;
  box-sizing: border-box;
  .dnd-app {
    width: 200px;
    overflow: auto;
  }
  .dnd-wrap {
    align-items: center;
    width: 100%;
    user-select: none;
    // overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    // justify-content: center;

    // .dnd-item
  }
}
.dnd-item {
  width: 62px;
  height: 62px;
  margin: 5px;
  cursor: move;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.5px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px;
}
.item-hover:hover {
  box-shadow: 0 0 10px #ccc;
}
.dnd-item :hover {
  box-shadow: 0 0 10px #ccc;
}
.title {
  padding: 0 5px;
  font-size: 14px;
  color: #666;
  line-height: 16px;
}
.size-30 {
  width: 30px;
  height: 30px;
}
.size-40 {
  width: 40px;
  height: 40px;
}
.size-15 {
  width: 20px;
  height: 20px;
}
</style>
